window.onload=function() {
    var container = document.getElementById("container");
    var list = document.getElementById("list");//鍥剧墖鍒楄〃
    var buttons = document.getElementById('buttons').getElementsByTagName("span");//鍦嗗舰灏忔寜閽�
    var prev = document.getElementById("prev");//宸︾澶�
    var next = document.getElementById("next");//鍙崇澶�
    var text = document.getElementById("text");//鏂囨湰
    var index = 1;//褰撳墠鏄剧ず绗嚑寮犲浘鐗�
    var animated = false;//鍥剧墖鏄惁鍦ㄥ姩鐢�
    var timer = null;//鏈仠鐣欑晫闈㈡椂鐨勫畾鏃跺櫒
    var timer2 = null;//鍋滅暀鐣岄潰鏃剁殑瀹氭椂鍣�
    //绠ご鐐瑰嚮浜嬩欢
    next.onclick = function () {
        index += 1;
        showButton();
        if (!animated)
            animate(-265);
    }
    prev.onclick = function () {
        index -= 1;
        showButton();
        if (!animated)
            animate(+265);
    }

    //鍥剧墖鍒囨崲鍑芥暟
    function animate(offset) {
        animated = true;
        var newLeft = parseInt(list.style.left) + offset;
        var time = 100;//浣嶇Щ鎬绘椂闂�
        var interval = 10;//浣嶇Щ闂撮殧鏃堕棿
        var speed = offset / (time / interval);//姣忔浣嶇Щ閲�
        function go() {
            if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)) {
                list.style.left = parseInt(list.style.left) + speed + 'px';

                setTimeout(go, interval);

            } else {
                animated = false;
                list.style.left = newLeft + 'px';
                if (newLeft > -265) {
                    list.style.left = -1325 + 'px';
                }
                if (newLeft < -1325) {
                    list.style.left = -265 + 'px';
                }

            }
        }

        go();


    }

    //鍦嗙偣灏忔寜閽偣浜嚱鏁�
    function showButton() {
        for (var i = 0; i < buttons.length; i++)
            buttons[i].className = "";
        if (index > 5)
            index = 1;
        if (index < 1)
            index = 5;
        buttons[index - 1].className = "on";
    }

    //鍦嗙偣灏忔寜閽偣鍑讳簨浠�
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
            if (this.className == "on")
                return;      //浼樺寲----闃叉閲嶅鐐瑰嚮鍚屼竴鎸夐挳瀵艰嚧閲嶅璋冪敤鍑芥暟
            var myindex = parseInt(this.getAttribute("index"));
            var offset = -265 * (myindex - index);
            animate(offset);
            index = myindex;
            showButton();

        }
    }

    //鏈仠鐣欑晫闈㈡椂鐨勮嚜鍔ㄦ挱鏀�
    function play() {
        clearInterval(timer2);
        timer = setInterval(function () {
            next.onclick();
        }, 2000);
    }

    //鍋滅暀鐣岄潰鏃剁殑鑷姩鎾斁
    function stop() {
        clearInterval(timer);
        timer2 = setInterval(function () {
            next.onclick();
        }, 5000);
    }

    container.onmouseover = function () {
        stop();
    }
    container.onmouseout = play;
    //涓€寮€濮嬫槸鑷姩鎾斁鐨�
    play();
}
